import { Button, message } from 'antd';
import Cookies from 'js-cookie';
import { useEffect } from 'react';
import { history, useDispatch } from 'umi';

import { buyedProducts } from '@/services/orderManage';

import styles from './index.less';

export interface Props {
  price: number;
  type: string;
  infoList: string[];
  title: string;
  id: string;
}
const USER_INFO = JSON.parse(localStorage.getItem('USER_INFO') as string);
export default function PriceInfo(props: Props) {
  const dispatch = useDispatch();
  const onceShop = async (param: Props) => {
    if (param.type!=='base') {
      const res = await buyedProducts();
      if (res.code===200 && res.data.data.length!==0) {
        message.warn('您已购买标准产品或者已存在试用订单，无法再次试用！');
        return;
      } else {}
    }
    if (param.type!=='base' && USER_INFO?.hasTrialOrder===true) {
      message.info('已经存在试用订单, 即将跳转到登录页');
      setTimeout(() => {
        window.open('https://backend.chinairap.cn/');
      }, 1000);
      return;
    }
    if (!Cookies.get('saas_token')) {
      history.push('Login');
      setTimeout(() => {
        message.warn('请先登录');
      }, 100);
      return;
    }

    dispatch({
      type: 'OrderManage/getVersion',
      payload: {
        price: param.price,
        // price: 1980,
        version: param.type === 'base' ? 'base' : param.type,
        id: props.id,
      },
    });

    window.localStorage.setItem('version', JSON.stringify({
      price: param.price,
      // price: 1980,
      version: param.type === 'base' ? 'base' : param.type,
      id: props.id,
    }));
    const timer = setTimeout(function() {
      try{
        window.open('/ProOrder');
        clearTimeout(timer);
      }catch(e){
        console.log(e);
      }
    },0);
  };

  useEffect(() => {
    if (window.localStorage.getItem('version')) {
      window.localStorage.removeItem('version');
    }
  }, []);
  return (
    <div className={styles.priceContent}>
      <div className={styles.boxTop}>
        <div className={styles.titleStyle}>{props.title}</div>
        <div className={styles.textStyle}>
          {props.infoList &&
            props.infoList.map((item: string) => {
              return <span key={Math.random()}>{item}</span>;
            })}
        </div>
      </div>
      <div className={styles.boxBot}>
        {props.type === 'trail' ? (
          <>
            <div className={styles.price}>
              ￥ <span>{props.price}</span>
            </div>
            <div className={styles.trail}>免费试用 3 个月</div>
            <Button type="primary" onClick={() => onceShop(props)}>
              马上试用
            </Button>
          </>
        ) : (
          <>
            <div className={styles.price}>
              ￥ <span>{props.price}</span>/产线/年
            </div>
            <div className={styles.trail} />
              <Button onClick={() => onceShop(props)} className={styles.onceBuy} type="primary">
                马上选购
              </Button>
          </>
        )}
      </div>
      {props.type === 'trail' ? (
        <div className={styles.float} style={{ width: 40, backgroundColor: '#1A3DC9' }}>
          免费
        </div>
      ) : props.type === 'base' ? (
        <div className={styles.float} style={{ width: 64, backgroundColor: '#EF4859' }}>
          超值优惠
        </div>
      ) : (
        <div className={styles.float} style={{ width: 69, backgroundColor: '#FF6329' }}>
          标准版
        </div>
      )}
    </div>
  );
}
